<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js">
	<head>
	  <meta charset="utf-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <meta name="description" content="这是一个 table 页面">
	  <meta name="keywords" content="table">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <meta name="renderer" content="webkit">
	  <meta http-equiv="Cache-Control" content="no-siteapp" />
	  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
	  <link rel="icon" type="image/png" href="${pageContext.request.contextPath}/assets/i/favicon.png">
	  <link rel="apple-touch-icon-precomposed" href="${pageContext.request.contextPath}/assets/i/app-icon72x72@2x.png">
	  <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min.css"/>
	  <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/admin.css">
	  <title>Amaze UI Admin table Examples</title>
	  <script type="text/javascript">
	  </script>
	</head>
	<body>
	<!--[if lte IE 9]>
	<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
	  以获得更好的体验！</p>
	<![endif]-->
	
		<header class="am-topbar am-topbar-inverse admin-header">
		  <div class="am-topbar-brand">
		    <strong>Amaze UI</strong> <small>后台管理模板</small>
		  </div>
		
		  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
		
		  <div class="am-collapse am-topbar-collapse" id="topbar-collapse">
		
		    <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
		      <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li>
		      <li class="am-dropdown" data-am-dropdown>
		        <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
		          <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span>
		        </a>
		        <ul class="am-dropdown-content">
		          <li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
		          <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
		          <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
		        </ul>
		      </li>
		      <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
		    </ul>
		  </div>
		</header>
		<!-- add person DIV -->
		<div class="am-modal am-modal-no-btn" tabindex="-1" id="user-modal-1">
		  <div class="am-modal-dialog">
		    <div class="am-modal-hd"> 用户注册 <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a> </div>
		    <!-- class="am-u-sm-12 am-u-md-8 am-u-md-pull-4" -->
		    <div >
	          <form class="am-form am-form-horizontal" action="" id="userRegiesterForm">
	            <div class="am-form-group">
	              <label for="allName" class="am-u-sm-3 am-form-label">姓 名</label>
	              <div class="am-u-sm-9">
	                <input type="text" id="allName" name="allName" placeholder="姓名 "/>
	              </div>
	            </div>
	            <div class="am-form-group">
	              <label for="userName" class="am-u-sm-3 am-form-label">姓 名</label>
	              <div class="am-u-sm-9">
	                <input type="text" id="userName" name="userName" placeholder="用户名 "/>
	              </div>
	            </div>
	            <div class="am-form-group">
	              <label for="passWord" class="am-u-sm-3 am-form-label">姓 名</label>
	              <div class="am-u-sm-9">
	                <input type="text" id="passWord" name="passWord" placeholder="密码 "/>
	              </div>
	            </div>
	            <div class="am-form-group">
	              <label for="email" class="am-u-sm-3 am-form-label">电子邮件</label>
	              <div class="am-u-sm-9">
	                <input type="email" id="email" name="email" placeholder="输入你的电子邮件 / Email">
	              </div>
	            </div>
	            <div class="am-form-group">
	              <label for="phoneNo" class="am-u-sm-3 am-form-label">常用手机</label>
	              <div class="am-u-sm-9">
	                <input type="tel" id="phoneNo" name="phoneNo" placeholder="输入你的电话号码 / Telephone">
	              </div>
	            </div>
	            <div class="am-form-group">
	              <label for="callNo" class="am-u-sm-3 am-form-label">联系电话</label>
	              <div class="am-u-sm-9">
	                <input type="tel" id="callNo" name="callNo" placeholder="输入你的电话号码 / Telephone">
	              </div>
	            </div>
	            <div class="am-form-group">
	              <div class="am-u-sm-6 am-u-sm-push-3">
	                <button type="button" id="userRegiesterSubmit" class="am-btn am-btn-primary btn-loading-example" data-am-loading="{spinner: 'circle-o-notch', loadingText: '加载中...', resetText: '加载过了'}" onclick="userRegiesterAdd()">提交1</button>
	              </div>
	            </div>
	          </form>
	        </div>
		  </div>
		</div>
		<div class="am-cf admin-main">
		  <!-- sidebar start -->
		  <div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
		    <div class="am-offcanvas-bar admin-offcanvas-bar">
		      <ul class="am-list admin-sidebar-list">
		        <li><a href="admin-index.html"><span class="am-icon-home"></span> 首页</a></li>
		        <li class="admin-parent">
		          <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-file"></span> 页面模块 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
		          <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
		            <li><a href="admin-user.html" class="am-cf"><span class="am-icon-check"></span> 个人资料<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li>
		            <li><a href="admin-help.html"><span class="am-icon-puzzle-piece"></span> 帮助页</a></li>
		            <li><a href="admin-gallery.html"><span class="am-icon-th"></span> 相册页面<span class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li>
		            <li><a href="admin-log.html"><span class="am-icon-calendar"></span> 系统日志</a></li>
		            <li><a href="admin-404.html"><span class="am-icon-bug"></span> 404</a></li>
		          </ul>
		        </li>
		        <li><a href="admin-table.html"><span class="am-icon-table"></span> 表格</a></li>
		        <li><a href="admin-form.html"><span class="am-icon-pencil-square-o"></span> 表单</a></li>
		        <li><a href="#"><span class="am-icon-sign-out"></span> 注销</a></li>
		      </ul>
		      <div class="am-panel am-panel-default admin-sidebar-panel">
		        <div class="am-panel-bd">
		          <p><span class="am-icon-bookmark"></span> 公告</p>
		          <p>公告内容 —— Amaze UI 2018-03-26</p>
		        </div>
		      </div>
		      <!-- <div class="am-panel am-panel-default admin-sidebar-panel">
		        <div class="am-panel-bd">
		          <p><span class="am-icon-tag"></span> wiki</p>
		          <p>Welcome to the Amaze UI wiki!</p>
		        </div>
		      </div> -->
		    </div>
		  </div>
		  <!-- sidebar end -->
		
		  <!-- content start -->
		  <div class="admin-content">
		    <div class="admin-content-body">
		      <div class="am-cf am-padding am-padding-bottom-0">
		        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">表格</strong> / <small>Table</small></div>
		      </div>
		
		      <hr>
		
		      <div class="am-g">
		        <div class="am-u-sm-12 am-u-md-6">
		          <div class="am-btn-toolbar">
		            <div class="am-btn-group am-btn-group-xs">
		              <button type="button" class="am-btn am-btn-default" onclick="userRegiesterModalOpen()"><span class="am-icon-plus"></span> 新增</button>
		              <button type="button" class="am-btn am-btn-default"><span class="am-icon-save"></span> 保存</button>
		              <button type="button" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 审核</button>
		              <button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 删除</button>
		            </div>
		          </div>
		        </div>
		        <div class="am-u-sm-12 am-u-md-3">
		          <div class="am-form-group">
		            <select data-am-selected="{btnSize: 'sm'}">
		              <option value="option1">所有类别</option>
		              <option value="option2">IT业界</option>
		              <option value="option3">数码产品</option>
		              <option value="option3">笔记本电脑</option>
		              <option value="option3">平板电脑</option>
		              <option value="option3">只能手机</option>
		              <option value="option3">超极本</option>
		            </select>
		          </div>
		        </div>
		        <div class="am-u-sm-12 am-u-md-3">
		          <div class="am-input-group am-input-group-sm">
		            <input type="text" class="am-form-field">
		          <span class="am-input-group-btn">
		            <button class="am-btn am-btn-default" type="button">搜索</button>
		          </span>
		          </div>
		        </div>
		      </div>
		
		      <div class="am-g">
		        <div class="am-u-sm-12" id="user_list_div">
		          <form class="am-form">
		            <table class="am-table am-table-striped am-table-hover table-main">
		              <thead>
		              <tr>
		                <th class="table-check">id</th><th class="table-id">姓名</th><th class="table-title">标题</th><th class="table-type">类别</th><th class="table-date am-hide-sm-only">修改日期</th><th class="table-set">操作</th>
		              </tr>
		              </thead>
		              <tbody>
		              <tr>
		                <td><a href="#">p</a></td>
		                <td>default</td>
		                <td class="am-hide-sm-only">测试1号</td>
		                <td class="am-hide-sm-only">测试1号</td>
		                <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
		                <td>
		                  <div class="am-btn-toolbar">
		                    <div class="am-btn-group am-btn-group-xs">
		                      <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
		                      <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
		                      <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
		                    </div>
		                  </div>
		                </td>
		              </tr>
		              <tr>
		                <td><a href="#">Business management</a></td>
		                <td class="am-hide-sm-only">测试1号</td>
		                <td class="am-hide-sm-only">测试1号</td>
		                <td>default</td>
		                <td class="am-hide-sm-only">2014年9月4日 7:28:47</td>
		                <td>
		                  <div class="am-btn-toolbar">
		                    <div class="am-btn-group am-btn-group-xs">
		                      <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
		                      <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
		                      <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
		                    </div>
		                  </div>
		                </td>
		              </tr>
		              
		              </tbody>
		            </table>
		            
		            <div class="am-cf"> 共 15 条记录
		              <div class="am-fr">
		                <ul class="am-pagination">
		                  <li class="am-disabled"><a href="#">«</a></li>
		                  <li class="am-active"><a href="#">1</a></li>
		                  <li><a href="#">2</a></li>
		                  <li><a href="#">3</a></li>
		                  <li><a href="#">4</a></li>
		                  <li><a href="#">5</a></li>
		                  <li><a href="#">»</a></li>
		                </ul>
		              </div>
		            </div>
		            <hr />
		            <p>注：.....</p>
		          </form>
		        </div>
		      </div>
		    </div>
		  </div>
		</div>

		<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>		
		<!--[if lt IE 9]>
		<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
		<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
		<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
		<![endif]-->
		<!--[if (gte IE 9)|!(IE)]><!-->
		<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
		<!--<![endif]-->
		<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
		<script src="${pageContext.request.contextPath}/assets/js/app.js"></script>
		<script type="text/javascript">
			function openModal(){
				$("doc-modal-1").modal();
			}
			function userRegiesterModalOpen(){
				$("#user-modal-1").find('[data-am-modal-confirm]').off('click.close.modal.amui');//去掉modal的关闭事件。
				$(this).removeData('amui.modal');
				$("#user-modal-1").modal({
    				onConfirm : function(options) {
    					$.post("${pageContext.request.contextPath}/people/peopleAdd.action",data,function(res){
							var re = eval("("+res+")");
							if(re.success){
								$("#user-modal-1").modal('close');
							}else{
								alert("提交失败！请联系管理员！");
							};
						});
    				}
    			})
			}
		  	function userRegiesterAdd(){
		  		var $uRegiesterSubmit = $(this);
		  		$uRegiesterSubmit.button('loading');
				var data = $("#userRegiesterForm").serialize();
				$.post("${pageContext.request.contextPath}/people/peopleAdd.action",data,function(res){
					var re = eval("("+res+")");
					if(re.success){
						alert("提交成功！");
						$("#user-modal-1").modal('close');
					}else{
						if(re.isExist){
							alert("用户名已存在，请重新输入!");
						}
					};
				});
		  	}
		  	function getUserList(curr, cid) {
				$.getJSON("${pageContext.request.contextPath}/people/getPeopleList.action",
				{	//参数
					action: "getPeopleList.action",
					courseid: cid,
					page: curr || 1,//
					nums: 10,		//每页显示的条数
					item1Id:$("#item1Id").val(),
					item2Id:$("#item2Id").val(),
					item3Id:$("#item3Id").val(),
					ticketId:$("#ticketId").val(),
					itemTitle:$("#title").val(),
					createTimeStart:$("#createTimeStart").val(),
					createTimeEnd:$("#createTimeEnd").val()
				}, function (datajson) {
					//此处输出内容
			          var table = $("<table></table>");
			          table.attr({class:"am-table am-table-bd am-table-striped admin-content-table",id:"personListTable"});
			          var thead = $("<thead><tr><th>单号</th><th>用户名</th><th>姓名</th><th>状态</th><th>创建时间</th><th>操作</th></tr></thead>");
			          table.append(thead);
			          var tbody = $("<tbody></tbody>");
			          tbody.attr({id:"content"});
			          if(datajson !=null){
			          	$(datajson.rows).each(function(n,Row){
			          		var tr = $("<tr></tr>");
			                    tr.append("<td>"+ Row.id+ "</td>");
			                    tbody.append(tr);
			                    //创建者组、创建人
			                    tr.append("<td><a href=\""+Row.userName+"\">"+ Row.userName + "</a></td>");
			                    tbody.append(tr);
			                    tr.append("<td>"+ Row.allName + "</td>");
			                    tbody.append(tr);
			                    var mm=Row.status;
			                  	if(mm==1){
	                            	tr.append("<td>使用中</td>");
	                            }else if(mm==11){
	                            	tr.append("<td>已报残</td>");
	                            }else{
	                            	tr.append("<td>未知</td>");
	                            }
			                    tbody.append(tr);
			                    tr.append("<td>"+ Row.dateScrapPlan + "</td>");
			                    tbody.append(tr);
			                    var td = $("<td></td>");
			                    var div = $("<div class=\"am-dropdown\" data-am-dropdown></div>");
			                    div.attr({class:"layui-nav-item"});
			                    var button1 = $("<button data-am-dropdown-toggle></button>");
			                    button1.attr({class:"am-btn am-btn-default am-btn-xs am-dropdown-toggle"});
			                    var span1 = $("<span></span>");
			                    span1.attr({class:"am-icon-cog"});
			                    var span2 = $("<span></span>");
			                    span2.attr({class:"am-icon-caret-down"});
			                    button1.append(span1);
			                    button1.append(span2);
			                    var ul=$("<ul></ul>");
			                    ul.attr({class:"am-dropdown-content"});
			                    ul.append("<li><a href=\"#\">1. 编辑</a></li><li><a href=\"#\">2. 下载</a></li><li><a href=\"#\">3. 删除</a></li>")
			                    //var a =$("<a style='color:#fff'>详情</a>");
			                    //a.attr("href","patientRecord.jsp");
			                    //a.attr("onclick","openPRDetail(\""+ Row.ticketId +"\")");
			                    //a.attr("data-url","patientRecord.jsp");
			                    //a.attr("html","详情");;
			                    //a.attr("target","_patient");
			                    //a.attr({class:"layui-btn detail"});
			                    div.append(button1);
			                    div.append(ul);
			                    td.append(div);
			                    tr.append(td);
			                    tbody.append(tr);
			          	});
			          };
			          table.append(tbody);
			          $("#user_list_div").empty();
			          $("#user_list_div").append(table);
			        // $("#log-list").innerHTML = table;
			        //显示分页
			      });
	    		};
	    		getUserList(0,1);
		</script>
	</body>
</html>
